<!-- 系统登录页 -->
<template>
  <div class="login-container">
    <el-form class="login-form" @keyup.enter="handleLogin">
      <h2 class="title">停车场管理系统</h2>
      <el-form-item>
        <el-input placeholder="用户名" v-model="form.account" prefix-icon="User" />
      </el-form-item>
      <el-form-item>
        <el-input placeholder="密码" v-model="form.passwd" type="password" prefix-icon="Lock" show-password />
      </el-form-item>
      <el-form-item>
        <el-button type="primary" @click="handleLogin" class="login-btn" :loading="loading">登录</el-button>
      </el-form-item>
    </el-form>
  </div>
</template>

<script setup>
import { ref } from 'vue';
import { useAuthStore } from '@/stores/auth';
import { ElMessage } from 'element-plus';

const authStore = useAuthStore();
const form = ref({ account: '', passwd: '' });
const loading = ref(false);

const handleLogin = async () => {
  loading.value = true;
  const success = await authStore.login(form.value);
  if (!success) {
    form.value.passwd = '';
  }
  loading.value = false;
};
</script>

<style scoped>
.login-container {
  --background-start: #b3e5fc;
  --background-end: #f8bbd0;
  --form-shadow: 0 4px 20px rgba(0, 0, 0, 0.1);

  display: flex;
  justify-content: center;
  align-items: center;
  height: 100vh;
  background: linear-gradient(145deg, var(--background-start), var(--background-end));
}

.login-form {
  width: 400px;
  padding: 40px;
  background: rgba(255, 255, 255, 0.95);
  border-radius: 12px;
  box-shadow: var(--form-shadow);
}

.title {
  text-align: center;
  margin-bottom: 30px;
  color: #333;
  font-size: 24px;
  letter-spacing: 2px;
}

.login-btn {
  width: 100%;
  margin-top: 15px;
  height: 42px;
  letter-spacing: 1px;
}
</style>